<template>
  <div class="editpersonal">
    <!-- 头部 -->
    <myheader title="编辑个人信息">
      <!-- 通过自定义属性slot，指定插槽位置 -->
      <span slot="left" class="iconfont iconjiantou2" @click="$router.back()"></span>
    </myheader>
    <!-- 图片与上传 -->
    <div class="user_img">
      <img :src="current.head_img" alt />
      <van-uploader :after-read="afterRead" />
    </div>
    <!-- 昵称 -->
    <!-- 使用组件 -->
    <mycell title="昵称" :desc="current.nickname" @click="nickshow = !nickshow"></mycell>
    <!-- 使用vant-ui 弹出框 -->
    <van-dialog v-model="nickshow" title="修改昵称" show-cancel-button @confirm="updatenickname">
      <!-- 这里要:value单向绑定，修改数据但是不直接改变 -->
      <van-field
        :value="current.nickname"
        label="文本"
        placeholder="请输入"
        @input="handlenick"
        required
      />
    </van-dialog>
    <mycell type="pass" title="密码" :desc="current.password" @click="passshow = !passshow"></mycell>
    <!-- 使用vant-ui 弹出框 -->
    <van-dialog
      v-model="passshow"
      title="修改密码"
      show-cancel-button
      @confirm="updatepassword"
      :before-close="beforeClose"
    >
      <van-field
        type="password"
        :value="originpass"
        label="原密码"
        placeholder="请输入"
        @input="handleOriginpass"
        required
      />
      <van-field
        type="password"
        :value="newpass"
        label="新密码"
        placeholder="请输入"
        @input="handleNewpass"
        required
      />
    </van-dialog>
    <mycell
      type="text"
      title="性别"
      :desc="current.gender == 1?'男':'女'"
      @click="gendershow = !gendershow"
    ></mycell>
    <!-- 使用vant-ui 弹出框 -->
    <van-dialog v-model="gendershow" title="修改性别" show-cancel-button @confirm="updategender">
      <van-picker
        title="修改性别"
        :columns="['女','男']"
        :defaultIndex="current.gender"
        @change="getgender"
      />
    </van-dialog>
  </div>
</template>

<script>
// 导入组件
import myheader from "@/components/myheader";
import mycell from "@/components/mycell";
import myaxios from "@/utils/myaxios";
// 请求接口
import { getUserDetail, editPersonalInfo } from "@/apis/users.js";
import { uploadFile } from "@/apis/fileUpload";

export default {
  // 注入组件
  components: {
    mycell,
    myheader,
  },
  data() {
    return {
      nickshow: false,
      passshow: false,
      gendershow: false,
      current: {},
      username: "",
      originpass: "", // 原密码
      newpass: "", // 新密码
      usergender: "",
    };
  },
  // async是异步的标记
  async mounted() {
    let id = this.$route.params.id;
    // 根据参数去请求 获取用户详情数据，实现动态渲染
    let res = await getUserDetail(id);
    // console.log(res);
    // 对请求结果进行判断
    if (res.data.message === "获取成功") {
      this.current = res.data.data;
      // 对图片处理
      // 1.如果有图片数据，在路径前面拼接 基准路径
      // 2.如果没有，赋值一个默认图片
      if (res.data.data.head_img) {
        this.current.head_img =
          myaxios.defaults.baseURL + res.data.data.head_img;
      } else {
        this.current.head_img =
          myaxios.defaults.baseURL + "/uploads/images/default.png";
      }
    }
  },
  methods: {
    getgender(a, b, index) {
      console.log(a, b, index);
      this.usergender = index;
    },
    // 收集用户输入的昵称
    handlenick(data) {
      // 获取输入的内容
      // console.log(data);
      // 更新到数据
      this.username = data;
    },
    handleOriginpass(data) {
      // 更新到数据
      this.originpass = data;
    },
    handleNewpass(data) {
      // 更新到数据
      this.newpass = data;
    },
    // 更新用户头像
    // 异步方法以同步方式执行
    async afterRead(file) {
      // FormData 上传方式
      let formData = new FormData();
      formData.append("file", file.file);
      // 此时可以自行将文件上传至服务器
      let res = await uploadFile(formData);
      console.log(res);
      if (res.data.message == "文件上传成功") {
        this.current.head_img = myaxios.defaults.baseURL + res.data.data.url;
        // 上传文件成功之后，立刻更新用户头像，注意：需要的参数是后台返回的图片的目录数据url，不包含服务器地址
        let result = await editPersonalInfo(this.current.id, {
          head_img: res.data.data.url,
        });
        console.log(result);
        if (result.data.message == "修改成功") {
          this.$toast.success("头像修改成功");
        } else {
          this.$toast.fail("头像修改失败");
        }
      } else {
        this.$toast.fail("文件上传失败");
      }
    },

    // 更新昵称
    async updatenickname() {
      console.log(this.username);
      if (this.username.trim().length == 0) {
        this.$toast.warning("请输入用户名");
      } else {
        let res = await editPersonalInfo(this.current.id, {
          nickname: this.username,
        });
        console.log(res);
        if (res.data.message == "修改成功") {
          this.current.nickname = this.username;
          // 并且弹出信息告诉修改成功
          this.$toast.success("修改昵称成功");
        } else {
          this.$toast.fail("修改昵称失败");
        }
      }
    },
    // 更新密码
    async updatepassword() {
      console.log(this.current.password);
      // 1.先判断输入的原密码是否与真实密码匹配
      if (this.originpass === this.current.password) {
        // 如果匹配，发送请求
        let res = await editPersonalInfo(this.current.id, {
          password: this.newpass,
        });
        console.log(res);
        if (res.data.message == "修改成功") {
          this.current.password = this.newpass;
          // 并且弹出信息告诉修改成功
          this.$toast.success("修改昵称成功");
          this.originpass = this.newpass = "";
        } else {
          this.$toast.fail("修改昵称失败");
        }
      } else {
        this.$toast.fail("原始密码输入错误");
      }
    },
    async beforeClose(action, done) {
      console.log(action);
      // 如果点击的是确认按钮
      if (action == "confirm") {
        // 判断什么时候关闭弹出框
        // 如果原密码输入不正确，就不关闭
        if (this.originpass != this.current.password) {
          done(false);
          this.$toast.fail("原密码错误，请重新输入");
        } else if (this.newpass == "") {
          this.$toast.fail("你忘了填新密码");
          done(false);
        } else {
          // 输入正确就可以关闭
          // 清空输入框内容并且关闭
          this.originpass = this.newpass = "";
          done();
        }
      } else {
        // 清空输入框内容并且关闭
        this.originpass = this.newpass = "";
        done();
      }
    },
    async updategender() {
      let res = await editPersonalInfo(this.current.id, {
        gender: this.usergender,
      });
      console.log(res);
      if (res.data.message == "修改成功") {
        this.current.gender = this.usergender;
        // 并且弹出信息告诉修改成功
        this.$toast.success("修改成功");
      } else {
        this.$toast.fail("修改失败");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.editpersonal {
  .user_img {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    img {
      width: 90px;
      height: 90px;
      border-radius: 50%;
    }
    // 更深的渲染样式
    /deep/.van-uploader__upload {
      width: 90px;
      height: 90px;
    }
    /deep/.van-uploader {
      position: absolute;
      opacity: 0;
    }
  }
}
</style>